import { Button, Checkbox, message, Modal } from "antd";
import { connect } from "dva";
import React, { PureComponent } from "react";
@connect(state => ({
  theme: state.theme,
  currentUser: state.user.currentUser,
  menu: state.menu,
}))
export default class fieldModal extends PureComponent {
  state = {
    buttonLoading: false,
    checkedList: []
  };
//   componentDidMount() {
//     // this.props.onRef(this)
//     const {checked}=this.props;
//     setTimeout(() => {
//       this.setState({
//         checkedList: checked
//       })
//   },300)
// }
  // setStateData = ({ ...data }) => {
  //   this.setState({ ...data })
  // };

  ok = () => {
   const {filterColumns,checked}=this.props;
   const {checkedList}=this.state;
   console.log('cheed', checkedList);
   if(checkedList.length > 0){
    filterColumns(checkedList);
   }else{
    filterColumns(checked);
   }
   this.close();
  };

  setLoading = (flag) => {
    this.setState({
      buttonLoading: flag,
    });
  };

  close = () => {
    const { closeModal } = this.props;
    this.setState({
      buttonLoading: false,
      checkedList: []
    });
    closeModal();
  };

  getCheckBox = () => {
    const { fieldList } = this.props;
    console.log('获取到的全选列表数据', fieldList);
    return fieldList.map((d,index) => {
      return (
        <div style={{ marginTop: 10, marginLeft: 10 }} key={index}>
          <Checkbox  value={d.column} >
            {d.name}
          </Checkbox>
        </div>
      );
    });
  };
  onChange = (checkedValues) => {
    // console.log('checked', checkedValues);
    this.setState({
      checkedList: checkedValues,
    });
  };

  renderSimpleForm() {
    const { modalVisible,fieldList,checked} = this.props;
    const { buttonLoading,checkedList} = this.state;
    const footer = (
      <div>
        <Button onClick={this.close}>取消</Button>
        <Button loading={buttonLoading} onClick={this.ok} type="primary">
          确定
        </Button>
      </div>
    );
    return (
      <Modal
        footer={footer}
        title="展示字段"
        visible={modalVisible}
        onCancel={this.close}
        style={{ top: 50 }}
      >
        <div style={{ marginLeft: 50 }}>
          <h3>请选择需要展示的字段：</h3>
          <Checkbox.Group defaultValue={checked} onChange={this.onChange} >
          {
              fieldList.map((item, index) => (
                <div style={{ marginTop: 10, marginLeft: 10 }} key={index}>
                <Checkbox 
                    key={item.value} 
                    value={item.value} 
                 >
                  {item.label}
                 </Checkbox>
                 </div>
            ))
          }
          </Checkbox.Group>
          {/* <Checkbox.Group
            value={checkedList}
            style={{ width: "100%" }}
            onChange={this.onChange}
          >
            {this.getCheckBox()}
          </Checkbox.Group> */}
        </div>
      </Modal>
    );
  }

  render() {
    return this.renderSimpleForm();
  }
}
